<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* overflow属性：
     1.visible默认值 可见的 ,溢出部分是显示的
     2.hidden 溢出部分直接隐藏 隐藏超过边框范围的内容
     3.scroll 溢出的部分出现滚动条
     4.auto 如果没有溢出就正常显示 如果有溢出 溢出的方向出现滚动条 */
</style>

<body>

    <div style="width:100px;overflow: hidden;border: solid;">
        <span style="width:200px;border:solid;">张彤张彤</span>

        <!-- 文本水平居中 ：
            
            1.text-align:center
            2.单行文本垂直居中:让文字行高 line-height等于盒子的高度 height 
            3.多行文本垂直居中:让元素的高度自适应或者正好等于多行文字的高度,设置元素内边距上下值相同-->


        <!-- 元素垂直居中
            垂直居中：与多行文本类似,让父元素高度自适应,子元素高度自动撑开父级的高度,再给父元素设置相同的上下边距 -->

        <!-- 元素水平居中
            margin:0(上下) auto(左右) 适用情况：子盒子宽度低于父盒子宽度 -->


    </div>

</body>

</html>